/*
 * @Date: 2022-03-29 12:53:14
 * @LastEditors: LiuPeng
 * @LastEditTime: 2022-04-02 10:30:28
 * @FilePath: \payment\pay\src\pages\AgencyPay\AgencyCardList.jsx
 */
import React, { useState } from 'react'
import {
  Row, Col,
  Form, Input,
  Button, Table,
  Popover, Tag,
} from 'antd';
import {
  SearchOutlined, PlusOutlined,
  EditOutlined, DeleteOutlined,
  ExclamationCircleOutlined
} from '@ant-design/icons';
import zhCN from 'antd/es/locale/zh_CN'
import {
  ConfigProvider, Modal
} from 'antd';

// 引入样式
import myStyle from './CSS/AgencyPayOrder.module.css'

// 引入模态框
import MyModal from '../../components/Modal'
// 引入模态框所需内容
import Info from '../../components/Info/AgencyCardList/Edit'
// 重置密码
import ResetLoginPWDInfo from '../../components/Info/AgencyCardList/ResetLoginPWDInfo'
// 资金操作
import FundOperationInfo from '../../components/Info/AgencyCardList/FundOperationInfo'
// 添加卡商
import AddCardDealerInfo from '../../components/Info/AgencyCardList/AddCardDealerInfo'




import '../../components/HOC/HocButton/index.css'
// 引入初始化数据
import {
  cardDealerListData,
  rowSelection,
  total
} from '../../initData/AgencyCardList'

// 确认对话框
const { confirm } = Modal;

// 点删除时的确认对话框
const showDeleteConfirm = () => {
  confirm({
    title: '信息',
    icon: <ExclamationCircleOutlined />,
    content: '真的删除行吗？',
    okText: '确定',
    okType: 'danger',
    cancelText: '取消',
    onOk() {
      console.log('OK');
    },
    onCancel() {
      console.log('Cancel');
    },
  });
}
// 点击 重置Google密钥 时的确认对话框
const resetGoogleKeyConfirm = () => {
  confirm({
    title: '信息',
    icon: <ExclamationCircleOutlined />,
    content: '是否重置谷歌密匙?',
    okText: '确定',
    okType: 'danger',
    cancelText: '取消',
    onOk() {
      console.log('OK');
    },
    onCancel() {
      console.log('Cancel');
    },
  });
}

export default function AgencyCardList() {
  // 初始状态
  // 初始表格数据
  let [initTableData] = useState(cardDealerListData)
  // 点击操作按钮获取当前行的数据，并放入状态
  let [currentRowData, setCurrentRowData] = useState();

  // 操作按钮数据
  let operationData = (
    <div style={{ 'width': '160px' }}>
      {/* 修改 */}
      <MyModal
        type='text'
        block
        icon={<EditOutlined />}
        title='编辑卡商'
        btntext='修改'
        className={myStyle.button_text_left}
      >
        <Info currentRowData={currentRowData}></Info>
      </MyModal>
      {/* 资金操作 */}
      <MyModal
        type='text'
        block
        icon={<EditOutlined />}
        title='资金操作'
        btntext='资金操作'
        className={myStyle.button_text_left}
      >
        <FundOperationInfo></FundOperationInfo>
      </MyModal>
      {/* 删除 */}
      <Button className={myStyle.button_text_left}
        type='text'
        block
        icon={<DeleteOutlined />}
        onClick={showDeleteConfirm}
      >
        删除
      </Button>
      {/* 重置登陆密码 */}
      <MyModal
        type='text'
        block
        icon={<EditOutlined />}
        title='重置登陆密码'
        btntext='重置登陆密码'
        className={myStyle.button_text_left}
      >
        <ResetLoginPWDInfo></ResetLoginPWDInfo>
      </MyModal>
      {/* 重置Google密钥 */}
      <Button className={myStyle.button_text_left}
        type='text'
        block
        icon={<EditOutlined />}
        onClick={resetGoogleKeyConfirm}

      >
        重置Google密钥
      </Button>
    </div >
  );


  // 表头 title
  let columns = [
    {
      title: '用户名',
      dataIndex: 'userName',
      key: 'userName',
      width: 120,
    },
    {
      width: 200,
      title: '卡商ID',
      dataIndex: 'cardDealerID',
      key: 'cardDealerID',
      ellipsis: {
        showTitle: false,
      },
    },
    {
      width: 120,
      title: '商户名称',
      dataIndex: 'merchantName',
      key: 'merchantName',
    },
    {
      width: 120,
      title: '是否代理',
      dataIndex: 'agentOrNot',
      key: 'agentOrNot',
    },
    {
      width: 120,
      title: '可用余额',
      dataIndex: 'availableBalance',
      key: 'availableBalance',
    },
    {
      width: 120,
      title: '冻结余额',
      dataIndex: 'frozenBalance',
      key: 'frozenBalance',
    },
    {
      width: 120,
      title: '账号状态',
      dataIndex: 'accountStatus',
      key: 'accountStatus',
    },
    {
      width: 120,
      title: '颜色',
      dataIndex: 'colour',
      key: 'colour',
      align: 'center',
      render: colour => {
        return (
          <Tag style={{ width: '40px', height: '30px' }} color={colour}></Tag>
        )
      }
    },
    {
      width: 200,
      title: 'Google密匙',
      dataIndex: 'GoogleKey',
      key: 'GoogleKey',
      ellipsis: {
        showTitle: false,
      },
    },
    {
      width: 200,
      title: '开户时间',
      dataIndex: 'AccountOpeningTime',
      key: 'AccountOpeningTime',
    },
    {
      width: 150,
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      render: (text, record, index) => {
        return (
          <Popover placement="bottomRight" trigger="click" content={operationData}
            currentRowData={currentRowData}>
            <Button onClick={() => { setCurrentRowData(record) }} className={myStyle.button_text_left} type='primary'>操作</Button>
          </Popover>
        )
      }
    },
  ];
  return (
    <>
      {/* 搜索区域 */}
      <Row className={myStyle.row_margin}>
        <Form
          name="searchForm"
          layout='inline'
          size='large'
        >
          <Col span={12}>
            <Form.Item name="searchInputV" >
              <Input placeholder="用户名/手机/商户号" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item >
              <Button style={{ 'marginRight': '10px' }} type="primary" icon={<SearchOutlined />}>
                搜索
              </Button>

              {/* 开户 */}
              <MyModal
                type="primary"
                icon={<PlusOutlined />}
                title='添加卡商'
                btntext='开户'
                className={`${myStyle.button_text_left} green`}
              >
                <AddCardDealerInfo></AddCardDealerInfo>
              </MyModal>

            </Form.Item>
          </Col>

        </Form>
      </Row>
      {/* 表格区域 卡商列表数据 */}
      <Row >
        <Col span={24}>
          <ConfigProvider locale={zhCN}>
            <Table
              rowSelection={rowSelection}
              columns={columns}
              dataSource={initTableData}
              tableLayout='fixed'
              scroll={{ x: 1300 }}
              bordered
              showSorterTooltip={false}
              pagination={{
                total: total,
                showSizeChanger: true,
                showQuickJumper: true,
                showTotal: total => `共 ${total} 条`
              }}
            >
            </Table>
          </ConfigProvider>
        </Col>
      </Row>
    </ >
  )
}
